<template>
  <div class="index">
    <carrousel :article="article" />
    <announcement :announcement="announcement" />
    <article-list
      :article="article"
      @loadmore="loadmoreArticle"
    />
  </div>
</template>

<script>
import ArticleList from '~/components/archive/list'
import Carrousel from '~/components/archive/carrousel'
import Announcement from '~/components/archive/announcement'

export default {
  name: 'Index',
  components: {
    Carrousel,
    Announcement,
    ArticleList
  },
  head() {
    return {
      title: (this.isEnLang ? this.appOption.slugTitle : this.appOption.siteTitle) || '...',
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content:
            this.appOption.homeKeywords ||
            ''
        },
        {
          hid: 'description',
          name: 'description',
          content: this.appOption.siteDesc
        }
      ]
    }
  },
  computed: {
    isEnLang() {
      return this.$store.getters['global/isEnLang']
    },
    appOption() {
      return this.$store.state.global.appOption.data
    },
    article() {
      return this.$store.state.article.list
    },
    announcement() {
      return this.$store.state.announcement
    },
    nextPageParams() {
      return {
        page: this.article.data.pagination.current + 1
      }
    }
  },
  fetch({ store }) {
    return Promise.all([
      store.dispatch('article/fetchList'),
      store.dispatch('announcement/fetchList'),
      store.dispatch('global/fetchAdminInfo'),
      store.dispatch('global/fetchAppOption')
    ])
  },
  mounted() {
    this.$axios.post('/logs', { agent: navigator.userAgent })
  },
  methods: {
    loadmoreArticle() {
      this.$store.dispatch('article/fetchList', this.nextPageParams)
    }
  }
}
</script>
